<template>
  <div id="dialogMaterialConfig">
    <el-dialog
      class="about-set"
      top="40px"
      :title="`${rowData.collegeTitle}素材配置`"
      :visible.sync="dialogData.isShow"
      width="600px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="
              `上传${dialogData.type === 'TRIAL' ? '体验' : '正式'}课视频`
            "
            prop="vid"
          >
            <div class="video-box">
              <span class="video-cover-box" v-loading="upVideoImgLoading">
                <el-image
                  v-if="videoCover"
                  :src="videoCover"
                  fit="contain"
                ></el-image>
                <span v-else>
                  暂无封面
                </span>
              </span>
              <div class="up-btn-box">
                <span :class="checkClass">{{ checkText }}</span>
                <el-button class="upload-btn" id="upload" type="warning">
                  上传视频
                </el-button>
              </div>
            </div>

            <p class="video-tips">
              请上传MP4格式，其他格式会不兼容，请谨慎处理
            </p>
          </el-form-item>
          <el-form-item
            class="min-margin"
            label="课程详情"
            prop="detailImage"
            v-if="dialogData.type === 'TRIAL'"
          >
            <uploadSingImg
              v-loading="upImgLoading"
              class="upImg"
              ref="uploadSImg"
              :imgUrl="ruleForm.detailImage"
              accept=".jpg,.png"
              :maxSize="10"
              :showDeleteIcon="true"
              @getImgUrl="getImgUrl"
            >
              <template v-slot:imgInfo
                >只能上传.jpg，.png文件，且文件不超过10M</template
              >
            </uploadSingImg>
          </el-form-item>
          <el-form-item class="min-margin" label="讲师团队" prop="teamImage">
            <uploadSingImg
              v-loading="teacherLoading"
              class="upImg"
              ref="uploadSImg2"
              :imgUrl="ruleForm.teamImage"
              accept=".jpg,.png"
              :maxSize="10"
              :showDeleteIcon="true"
              @getImgUrl="getImgUrl2"
            >
              <template v-slot:imgInfo
                >只能上传.jpg，.png文件，且文件不超过10M</template
              >
            </uploadSingImg>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import { changeForm } from '@/api/appletsManagement/experienceCourseMaterialConfig' // 接口
import { getPolyvcover } from '@/api/common/img' // 接口
import { getVideoPara } from '@utils/pubFunction'
import { uploadVideo } from '@utils/uploadVideo'
import { getVideoImg } from '@utils/getFaceImg'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'dialogMaterialConfig',
  msg: '小程序管理-体验课暖场素材配置',
  components: {
    uploadSingImg
  },
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      upImgLoading: false,
      teacherLoading: false,
      upVideoImgLoading: false,
      checkStatus: '', //审核状态,
      checkText: '未上传', //审核状态文字,
      checkClass: 'white-text', //审核状态颜色,
      rowData: {},
      videoCover: '',
      ruleForm: {
        detailImage: '', //课程详情图片
        teamImage: '', //讲师团队图片
        vid: '' // 视频vid
      },
      rules: {
        detailImage: { required: true, message: '请上传课程详情图片' },
        teamImage: { required: true, message: '请上传讲师团队图片' },
        vid: { required: true, message: '请上传视频' }
      },
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: '',
        polyvWriteToken: '',
        polyvReadToken: ''
      },
      upVideo: null
    }
  },
  watch: {
    checkStatus(newV, oldV) {
      switch (newV) {
        case 'UNCHECKED':
          this.checkText = '审核中'
          this.checkClass = 'green-text'
          break
        case 'PASS':
          this.checkText = '已通过'
          this.checkClass = 'green-text'
          break
        case 'UNPASS':
          this.checkText = '未通过'
          this.checkClass = 'red-text'
          break
        default:
          this.checkText = '未上传'
          this.checkClass = 'white-text'
      }
    }
  },
  mounted() {
    this.rowData = this.dialogData.params
    if (this.rowData.configured) {
      //已配置
      let {
        detailImage,
        teamImage,
        vid,
        polyvStatu,
        polyvStatuDesc
      } = this.rowData
      this.ruleForm = {
        detailImage,
        teamImage,
        vid
      }
      this.checkText = polyvStatuDesc
      this.checkStatus = polyvStatu
      this.getCoverRequire(vid)
    }
    this.getPolivNum()
  },
  methods: {
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      let params = {
        fileTypeLimit: 'mp4',
        fileLimit: 230686720,
        fileLimitTips: '上传内容超过220M，请重新上传'
      }
      getVideoPara().then((data) => {
        this.polivNum = { ...data }
        uploadVideo(_this.polivNum, _this.saveVideo, params).then((resObj) => {
          _this.upVideo = resObj
        })
      })
    },
    /* 获取封面图 */
    getVideoImg(vid) {
      let _this = this
      getVideoImg(vid, this.polivNum).then(
        (res) => {
          _this.videoCover = res
        },
        (res) => {
          this.$message.warning(res.message)
        }
      )
    },
    /* 保存上传视频 */
    saveVideo(fileData) {
      this.ruleForm.vid = fileData.vid
      this.getCoverRequire(this.ruleForm.vid)
      this.checkStatus = 'UNCHECKED'
    },
    /*状态复位*/
    statusRest() {
      this.upVideoImgLoading = false
    },
    /*封面图接口请求*/
    getCoverRequire(vid) {
      this.upVideoImgLoading = true
      getPolyvcover(
        { vid },
        (res) => {
          if (res.startsWith('http')) {
            let time = new Date().getTime()
            let url = res + '?' + time
            this.getVideoImgUrl(url)
            this.statusRest()
          } else {
            this.statusRest()
          }
        },
        (res) => {
          this.statusRest()
          this.$message.warning(res.message)
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.upVideo.update({
        uploadSuccess: ''
      })
      clearInterval(this.upVideo.timer)
      this.upVideo.destroy()
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    async confirmLabel(formName) {
      this.loading = true
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            collegeId: this.rowData.collegeId,
            type: this.dialogData.type
          }
          let obj = { ...this.ruleForm, ...params }
          changeForm(
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.loading = false
              this.$message.warning('配置失败，' + response.message)
            }
          )
        } else {
          this.loading = false
          return false
        }
      })
    },
    //视频封面图
    getVideoImgUrl(url) {
      this.videoCover = url
    },
    //课程详情图片
    getImgUrl(url) {
      this.$set(this.ruleForm, 'detailImage', url)
    },
    //讲师团队图片
    getImgUrl2(url) {
      this.$set(this.ruleForm, 'teamImage', url)
    }
  }
}
</script>

<style lang="less">
#dialogMaterialConfig {
  p.video-tips {
    margin: 0;
    padding-top: 8px;
    color: #f00;
    line-height: 20px;
  }
  .upImg {
    width: 180px;
  }
  .video-box {
    display: flex;
    .up-btn-box {
      width: 80px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
  }
  .video-cover-box {
    display: inline-block;
    width: 178px;
    height: 178px;
    border: 1px solid #ddd;
    background: #efefef;
    text-align: center;
    line-height: 178px;
    vertical-align: bottom;
    margin-right: 10px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .green-text {
    color: #1dc8a4;
  }
  .red-text {
    color: #f00;
  }
  .white-text {
    cursor: default;
    color: #fff;
  }
  .el-loading-spinner {
    top: 0;
    margin-top: 0;
  }
}
</style>
